<template>
  <div id="add">
    <view-box>

      <x-header slot="header">发布投票
        <a @click="onSubmit" slot="right">发布</a>
      </x-header>

      <div style="padding-top:56px;">
        <group>
          <x-textarea v-model="topic" :max="80" :rows="2" autosize placeholder="输入投票主题，2-80字"></x-textarea>
        </group>

        <group title="最多支持15个选项，每个选项不超过40个字">
          <!-- <option-item v-for="(item,index) in options" :key="index" :index="index" /> -->

          <flexbox v-for="(item,index) in options" :key="index">
            <flexbox-item :span="1"></flexbox-item>
            <flexbox-item class="option-item">
              <x-textarea v-model="options[index]" :max="40" :placeholder="`选项${(index+1)}`" :show-counter="false" :rows="1" autosize></x-textarea>
            </flexbox-item>
          </flexbox>

          <flexbox justify="center" align="center" @click.native="onAddOneOption" v-if="options.length < 15">
            <flexbox-item class="option-item">
              <cell class="add-option-item">
                <span slot="title">添加选项</span>
                <x-icon class="add-option-item-icon" slot="icon" type="ios-plus" size="26"></x-icon>
              </cell>
            </flexbox-item>
          </flexbox>

        </group>

        <group>
          <popup-picker title="投票类型" :data="typelist" v-model="selectedType" show-name placeholder="请选择投票类型"></popup-picker>
          <datetime v-model="deadline" format="YYYY-MM-DD HH:mm" title="结束时间"></datetime>
        </group>

      </div>
    </view-box>
  </div>
</template>

<style lang="less">
#add {
  height: 100%;
  background-color: #fbf9fe;
  .vux-header {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
  }
  .option-item {
    border-bottom: 1px solid #d9d9d9;
  }
  .add-option-item {
    font-size: 0;
    -webkit-text-size-adjust: none;
    span {
      font-size: 1rem;
      color: @cell-placeholder-color;
    }
    .add-option-item-icon {
      margin-right: 0.75rem;
      fill: @theme-color;
    }
  }
}
</style>

<script>
import {
  Flexbox,
  FlexboxItem,
  XHeader,
  ViewBox,
  Group,
  Cell,
  CellBox,
  XTextarea,
  Datetime,
  PopupPicker
} from "vux";
import OptionItem from "../components/OptionItem";
import { mapActions } from "vuex";

export default {
  name: "Add",
  components: {
    XHeader,
    ViewBox,
    Group,
    Cell,
    CellBox,
    XTextarea,
    Flexbox,
    FlexboxItem,
    Datetime,
    PopupPicker,
    OptionItem
  },
  data() {
    return {
      topic: "",
      typelist: [
        [
          {
            name: "单选",
            value: "single"
          },
          {
            name: "多选",
            value: "multiple"
          }
        ]
      ],
      selectedType: ["single"],
      deadline: "",
      options: ["", ""]
    };
  },
  methods: {
    ...mapActions(["reqCreateVote"]),
    onAddOneOption() {
      this.options.push("");
    },
    onSubmit() {
      let options = this.options
        .filter(option => option.trim().length > 0)
        .map(content => {
          return { content };
        });
      let payload = {
        topic: this.topic,
        type: this.selectedType[0],
        deadline: new Date(this.deadline).getTime(),
        options
      };
      console.log(payload);
      // debugger;
      this.reqCreateVote(payload);
    }
  }
};
</script>
